<template>
  <div>
    <!-- 查詢 -->
    <el-row>
      <el-col :span="16">
        <el-form :inline="true" :model="searchData">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input
                placeholder="课程名称"
                width="100px"
                v-model="searchData.courseName"
              ></el-input>
            </el-col>
            <!-- <el-col :span="5">
              <el-input
                placeholder="教练名称"
                width="100px"
                v-model="searchData.coachName"
              ></el-input>
            </el-col> -->
            <el-col :span="5">
              <el-select v-model="searchData.coachName" placeholder="教练">
                <el-option
                  v-for="item in coachList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-col>
            <el-button type="primary" @click="search">查询</el-button>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-row justify="end">
          <el-button type="primary" @click="sign">教练签到记录</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row style="padding-top: 20px">
      <el-col :span="24">
        <!-- :data="Datalist.ComList" -->
        <el-table :data="Datalist.ComList" border style="width: 100%">
          <el-table-column
            prop="courseName"
            label="课程名称"
            width="180"
            align="center"
          />
          <el-table-column prop="coachName" label="教练" align="center" />
          <el-table-column prop="stadiumName" label="场馆" align="center" />
          <el-table-column prop="stadiumAreaName" label="场地" align="center" />
          <el-table-column prop="courseTime" label="课程时间" align="center" />
          <el-table-column
            prop="appointmentNumber"
            label="预约人数"
            align="center"
          />
          <el-table-column prop="courseId" label="操作" align="center">
            <template #default="scope">
              <el-button @click="booking(scope.row)" type="primary" link
                >预约记录</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row style="padding-top: 20px">
      <el-col :span="24" class="pagination" justify="end">
        <el-pagination
          background
          style="justify-content: end"
          :page-size="searchData.pagesize"
          :total="searchData.count"
          layout="prev, pager, next"
          @current-change="currentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { onMounted, reactive, toRefs, watch } from "vue";
import { getRecordAppointment, getCoachFindALll } from "../../http/api";
import { ListData, listInt } from "../../type/RecordAppointment";
import { computed } from "@vue/reactivity";
import router from "../../router";
export default ({
  setup() {
    onMounted(() => {
      //挂载时就获取数据
      getList(); //预约记录
      getCoach(); //教练列表
    });
    const sign = () => {
      router.push("/sign");
    };
    //实例化ListData对象
    const data = reactive(new ListData());
    //预约详情
    const booking = (row: listInt) => {
      router.push({
        path: "/booking",
        query: {
          id: row.courseId,
        },
      });
    };

    //获取表格数据接口
    const getList = () => {
      getRecordAppointment({ limit: 5 }).then((res: any) => {
        data.list = res.data;
        data.searchData.count = res.data.length;
        // console.log(data.list);
      });
    };
    //获取教练列表
    const getCoach = () => {
      getCoachFindALll().then((res: any) => {
        data.coachList = res.data;
        
      });
    };

    //search
    const search = () => {
      console.log(data.searchData.courseName);
      console.log(data.searchData.coachName);
      let arr: listInt[] = []; //定义数组，用来接收查询过后要展示的数据
      if (data.searchData.courseName || data.searchData.coachName) {
        //判断搜索框是否有值
        if (data.searchData.courseName) {
          arr = data.list.filter((value) => {
            //将过滤出来的数组赋值给arr
            return value.courseName.indexOf(data.searchData.courseName) !== -1;
          });
        }
        if (data.searchData.coachName) { 
          //多条件搜索时可以通过判断上一个查询条件有没有值
          // 如果有，就在过滤的基础上，没有就是当前渲染的基础上
          arr = (data.searchData.courseName ? arr : data.list).filter(
            (value) => {
              //将过滤出来的数组赋值给arr
              return value.coachName.indexOf(data.searchData.coachName)!==-1;
            }
          );
        }
      } else {
        arr = data.list;
      }

      data.list = arr;
    };
    //监听输入框的属性
    watch(
      [() => data.searchData.courseName, () => data.searchData.coachName],
      () => {
        //如果为空就显示原数据
        if (
          data.searchData.courseName == "" ||
          data.searchData.coachName == ""
        ) {
          //重新获取接口数据
          getList();
        }
      }
    );
    //分页

    const currentChange = (page: number) => {
      data.searchData.page = page; //第几页
    };

    //计算属性，查询后的分页显示
    const Datalist = reactive({
      ComList: computed(() => {
        //1---[1-10]
        //2---[11-20]
        //3---[21-30]
        return data.list.slice(
          (data.searchData.page - 1) * data.searchData.pagesize,
          data.searchData.page * data.searchData.pagesize
        );
      }),
    });
    return {
      ...toRefs(data),
      search,
      currentChange,
      // sizeChange,
      Datalist,
      watch,
      getCoach,
      sign,
      booking,
    };
  },
});
</script>
